<template>
  <view>
    <view class="font"> 查询时间：{{ newTime }} </view>
    <uni-table ref="table" border stripe emptyText="暂无更多数据">
      <uni-tr>
        <uni-th width="30rpx" align="center">排名</uni-th>
        <uni-th width="30rpx" align="center">电影名</uni-th>
        <uni-th width="30rpx" align="center">上映时间及主演</uni-th>
        <!-- <uni-th width="30rpx" align="center">电影封面</uni-th> -->
        <uni-th width="30rpx" align="center">评分</uni-th>
        <uni-th width="30rpx" align="center">电影地址</uni-th>
      </uni-tr>
      <uni-tr v-for="(item, index) in movieRanking" :key="index">
        <uni-td>{{ index + 1 }}</uni-td>
        <uni-td>{{ item.title }}</uni-td>
        <uni-td>
          <view class="name">{{ item.info.yanyuan }}</view>
        </uni-td>
        <!-- <uni-td align="center">
            <van-image width="300" height="300" :src="`${item.info.imgurl}`" />
          </uni-td> -->
        <uni-td align="center">{{ item.info.pingfen }}</uni-td>
        <uni-td align="center">
          <uni-link :href="`${item.info.url}`" showUnderLine="false" color="red"
            >点击跳转</uni-link
          >
        </uni-td>
      </uni-tr>
    </uni-table>
  </view>
</template>

<script>
import mixin from "@/mixins/mixins.js";
export default {
  name: 'Ranking',
  mixins: [mixin],
  data() {
    return {
      movieRanking: [],
      newTime: ''
    }
  },
  created() {
    this.getMovieRanking()
  },
  methods: {
    async getMovieRanking() {
      const res = await this.$http.get('/douban')
      // console.log(res)
      this.movieRanking = res.data
      this.newTime = res.time
    },

  }
}
</script>

<style lang="scss" scoped>
.font {
  margin: 50rpx 0;
  text-align: center;
  color: aqua;
}
</style>
